<template>
  <px-scrollbar v-show="!isMain && isView" class="view-equip-detail">
    <div class="button-box">
      <px-button type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      <px-button v-has="'ALL_EQUIP_TOOLMANAGE_LEDGER_BORROW'" type="primary" :disabled="formValue.toolStatus !== 0" @click="handleBorrow">
        借出
      </px-button>
    </div>
    <div class="page-tabs-group">
      <div v-for="item in pageTabs" :key="item.id" class="page-tab" :class="activeTab === item.id ? 'active' : ''" @click="tabClick(item.id)">
        {{ item.label }}
      </div>
    </div>
    <div v-show="activeTab === '0'">
      <div class="view-equip-title">基础信息</div>
      <div class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">工具编码</div>
            <div class="text">{{ formValue.toolCode }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">工具分类</div>
            <div class="text">{{ formValue.toolCategoryDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">工具名称</div>
            <div class="text">{{ formValue.toolName }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">工具单位</div>
            <div class="text">{{ formValue.toolUnitDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">工具科室</div>
            <div class="text">{{ formValue.classNameDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">资产标签</div>
            <div class="text">{{ formValue.assetTagDesc }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">管理人</div>
            <div class="text">{{ formValue.custodianName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">入库时间</div>
            <div class="text">{{ formValue.inDate }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">生产日期</div>
            <div class="text">{{ formValue.productionDate }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">工具位置</div>
            <div class="text">{{ formValue.toolPosition }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">下次校验日期</div>
            <div class="text">{{ formValue.checkDate }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">校验提醒</div>
            <div class="text">{{ formValue.noticeTimeDesc }}</div>
          </div>
        </div>
        <div v-if="formValue.toolCategory !== 'key tools'" class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">型号/规格</div>
            <div class="text">{{ formValue.toolModel }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">品牌</div>
            <div class="text">{{ formValue.brandVal }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">工具状态</div>
            <div class="text">
              <px-tag
                effect="plain"
                :style="{
                  color: 'rgba(0, 0, 0, 0.8)',
                  border: `1px solid ${tagBorderColorList[formValue.toolStatus]}`,
                  backgroundColor: `${tagBgColorList[formValue.toolStatus]}`
                }"
              >
                {{ formValue.toolStatusDesc }}
              </px-tag>
            </div>
          </div>
        </div>
        <div v-else class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">工具状态</div>
            <div class="text">
              <px-tag
                effect="plain"
                :style="{
                  color: 'rgba(0, 0, 0, 0.8)',
                  border: `1px solid ${tagBorderColorList[formValue.toolStatus]}`,
                  backgroundColor: `${tagBgColorList[formValue.toolStatus]}`
                }"
              >
                {{ formValue.toolStatusDesc }}
              </px-tag>
            </div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">所属厂区</div>
            <div class="text">{{ formValue.factoryAreaDesc }}</div>
          </div>
          <div class="view-equip-item large">
            <div class="label">备注</div>
            <div class="text">{{ formValue.remark }}</div>
          </div>
        </div>
      </div>
      <div v-if="formValue.toolStatus === 3" class="view-equip-title">报废信息</div>
      <div v-if="formValue.toolStatus === 3" class="view-equip-wrap">
        <div class="view-equip-content">
          <div class="view-equip-item">
            <div class="label">报废人</div>
            <div class="text">{{ formValue.scrapName }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">报废原因</div>
            <div class="text">{{ formValue.scrapReasonDesc }}</div>
          </div>
          <div class="view-equip-item">
            <div class="label">报废时间</div>
            <div class="text">{{ formValue.scrapDate }}</div>
          </div>
        </div>
        <div class="view-equip-content">
          <div class="view-equip-item plus">
            <div class="label">备注</div>
            <div class="text">{{ formValue.scrapRemark }}</div>
          </div>
        </div>
      </div>
      <div class="view-equip-title">工具图片</div>
      <div style="display: flex; flex-wrap: wrap; margin-bottom: 16px">
        <PhotoUpload v-if="!isMain && isView" photoType="view" :photoData="{ moduleName: moduleName }" :photoList="formValue.toolPic" />
      </div>
      <div class="view-equip-title" v-if="formValue.toolStatus === 3">报废图片</div>
      <div style="display: flex; flex-wrap: wrap; margin-bottom: 16px" v-if="formValue.toolStatus === 3">
        <PhotoUpload v-if="!isMain && isView" photoType="view" :photoData="{ moduleName: moduleName }" :photoList="formValue.checkPic" />
      </div>
      <div class="view-equip-title">检测报告</div>
      <div class="view-equip-content" style="margin-bottom: 24px">
        <FileUpload v-if="!isMain && isView" fileType="view" :fileData="{ moduleName: moduleName }" :fileList="formValue.checkReportList" />
      </div>
    </div>
    <div v-show="activeTab === '1'">
      <px-table :data="loanReturnTableData" class="equip-table" size="small" height="calc(100vh - 280px)" border>
        <px-table-column type="index" label="序号" width="64" show-overflow-tooltip />
        <px-table-column prop="toolBorrowCode" label="工具借用单号" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            <px-button type="primary" link size="small" @click="toLoanReturn(scope.row)">{{ scope.row.toolBorrowCode }}</px-button>
          </template>
        </px-table-column>
        <px-table-column prop="classNameDesc" label="借用人科室" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolBorrowerName" label="借用人" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolBorrowDate" label="借用时间" min-width="140" show-overflow-tooltip />
        <px-table-column prop="toolBorrowUse" label="借出用途" min-width="100" show-overflow-tooltip />
        <px-table-column prop="toolRevertDate" label="归还时间" min-width="140" show-overflow-tooltip />
        <px-table-column prop="revertStatus" label="归还状态" min-width="100" show-overflow-tooltip>
          <template #default="scope">
            <px-tag
              effect="plain"
              :style="{
                color: 'rgba(0, 0, 0, 0.8)',
                border: `1px solid ${revertTagBorderColorList[scope.row.revertStatus]}`,
                backgroundColor: `${revertTagBgColorList[scope.row.revertStatus]}`
              }"
            >
              {{ scope.row.revertStatusDesc }}
            </px-tag>
          </template>
        </px-table-column>
      </px-table>
    </div>
  </px-scrollbar>
</template>
<script setup lang="ts">
import { getModuleName, getToolLedger, queryToolLoanReturn } from "@/api/equip/toolManage";
import FileUpload from "@/components/Upload/FileUpload.vue";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import { computed, getCurrentInstance, reactive, toRefs, watch } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps({
  // 主页面/详情页面
  isMain: {
    type: Boolean,
    default: false
  },
  // 查看or新增/编辑
  isView: {
    type: Boolean,
    default: false
  },
  // 工具台账id
  toolId: {
    type: Number,
    default() {
      return undefined;
    }
  }
});
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const { proxy }: any = getCurrentInstance();
const state = reactive<any>({
  pageTabs: [
    { id: "0", label: "基础信息" },
    { id: "1", label: "工具借用历史记录" }
  ],
  activeTab: "0", // 默认在基础信息tab
  formValue: {
    toolCode: "",
    toolCategoryDesc: "",
    toolName: "",
    toolUnitDesc: "",
    toolModel: "",
    brandVal: "",
    classNameDesc: "",
    assetTag: "",
    custodianName: "",
    inDate: "",
    productionDate: "",
    toolStatus: "",
    toolStatusDesc: "",
    remark: "",
    scrapName: "",
    scrapReason: "",
    scrapDate: "",
    remark2: "",
    checkPic: [],
    checkReportList: []
  },
  loanReturnTableData: [],
  toolId: "",
  moduleName: ""
});
const { pageTabs, activeTab, formValue, loanReturnTableData, moduleName } = toRefs(state);

const tagBorderColorList = {
  0: "#4CCBA1",
  1: "#F37272",
  2: "#F7B648",
  3: "#7997A8"
};

const tagBgColorList = {
  0: "#E8F8F3",
  1: "#FEECEC",
  2: "#FEF5E6",
  3: "#F7F7F7"
};

const revertTagBorderColorList = {
  0: "#f37272",
  1: "#4ccba1",
  2: "#f7b648"
};

const revertTagBgColorList = {
  0: "#feecec",
  1: "#e8f8f3",
  2: "#fef5e6"
};

// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    formValue.value.checkPic = [];
    formValue.value.checkReportList = [];
    activeTab.value = "0";
    tabClick("0");
  }
});
// 点击tab显示页面详情
const tabClick = async id => {
  activeTab.value = id;
  if (id === "0") {
    const params = {
      id: props.toolId
    };
    const data = await getToolLedger(params);
    formValue.value = data;
    getModuleNameValue();
  } else if (id === "1") {
    const params = { id: props.toolId };
    const data = await queryToolLoanReturn(params);
    loanReturnTableData.value = data;
  }
};
// 跳转到借用/归还详情
const toLoanReturn = row => {
  router.push(`/all/equip/toolManage/loanReturn?id=${row.id}&type=view`);
  // router.push({ path: "/all/equip/toolManage/loanReturn", query: { id: row.id } });
};
// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};

const handleBorrow = () => {
  router.push(`/all/equip/toolManage/loanReturn?id=${formValue.value.id}&type=add`);
};

// 获取getModuleName
const getModuleNameValue = async () => {
  const data = await getModuleName({});
  moduleName.value = data;
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
.button-box {
  margin: 16px auto 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>
